<template>
  <view class="content" v-if="load">
    <image class="imgage" src="@/static/image/home/backdrop.png" mode=""></image>
    <swiper :indicator-dots="true" circular="true" :autoplay="true" indicator-active-color="#ff8104" class="swiper">
      <swiper-item v-for="(item, index) in constData.applet_image" :key="index">
        <image :src="item" />
      </swiper-item>
    </swiper>
    <view v-if="promotionType === 'seckill' && countdown" class="msprice">
      <view class="seckill-wrap">
        <view class="seckill-wrapleft">
          <text class="seckill-label">秒杀价</text>
          <view class="msprice_a">
            <text class="seckill-price">￥{{ msprice }}</text>
            <text class="original-price">￥{{ constData.origin_amount }}</text>
          </view>
        </view>
        <view class="seckill-result">
          <text class="end_ms">距秒杀结束</text>
          <view class="countdown">
            <text class="countdown-item">{{ countdown.time.split(':')[0] }}</text> :
            <text class="countdown-item">{{ countdown.time.split(':')[1] }}</text> :
            <text class="countdown-item">{{ countdown.time.split(':')[2] }}</text>
          </view>
        </view>
      </view>
    </view>
    <view v-else-if="promotionType === 'coupon'" class="price">
      <view class="hands">到手价</view>
      <text class="currentPrice">￥{{ constData.actual_amount }}</text>
      <view class="mjcouPrice">券后￥<text>{{ promotionPrice }}</text></view>
      <text class="original">原价￥{{ constData.origin_amount }}</text>
    </view>
    <view v-else class="price">
      <view class="hands">到手价</view>
      <text class="currentPrice">￥{{ constData.actual_amount }}</text>
      <text class="original">原价￥{{ constData.origin_amount }}</text>
    </view>
    <view class="title">{{ constData.product_name }}</view>

    <view class="subheading">
      <view v-show="constData.service" class="shb_text">
        <text>服务</text>
        <text>{{ constData.service || "" }}</text>
      </view>
      <view v-show="constData.notice" class="shb_text">
        <text class="xuzhi">须知</text>
        <text>{{ constData.notice || "" }}</text>
      </view>
      <view v-show="constData.store" class="shb_text">
        <text>门店</text>
        <text>{{ constData.store || "" }}</text>
      </view>
      <view @click="callphone(constData.customerService[1].value)" class="shb_texta">
        <text>热线服务</text>
        <text>{{
          constData.customerService[0].title +
          constData.customerService[0].value
        }}</text>
      </view>
      <view v-show="constData.sku_type === 1">
        <view v-for="(item, index) in constDataSkus" :key="item.skuId" class="Addpurchase">
          <view class="jg">加购<text class="blackfont">&nbsp;&nbsp;{{ item.explain
              }}<text style="color: red">￥{{ item.price }}</text>/{{ item.unit }}</text>
          </view>
          <view class="progress flexC">
            <view class="text">加购数量</view>
            <view class="flex-c proG">
              <view @click="advance(false, index)" class="flex-c">-</view>
              <view class="flex-c">{{ item.buyMore + 1 }}</view>
              <view @click="advance(true, index)" class="flex-c">+</view>
            </view>
          </view>
          <view v-show="item.buyMore > 0" class="red">已加购{{ Number(item.buyMore) * Number(item.increment)
            }}{{ item.numUnit }}，共计{{
              Number(item.quantity) +
              Number(item.buyMore) * Number(item.increment)
            }}{{ item.numUnit }}，合计{{
              Number(constData.actual_amount) + item.price * item.buyMore
            }}元
          </view>
        </view>
      </view>
    </view>
    <view @click="toEvaluate(constData.product_id)" class="reputation">
      <view class="rep-l">
        <image src="@/static/image/home/pingj.png" mode=""></image>
        <text>团购评价（{{
          constData.evaluate_num < 1000 ? constData.evaluate_num : "999+" }}条）</text>
      </view>
      <view class="rep-r">
        <text>查看全部</text>
        <image src="@/static/image/home/arrow.jpg" mode=""></image>
      </view>
    </view>
    <view @click="toEvaluate(constData.product_id)" class="evale">
      <view class="evaluate" v-for="item in constData.evaluate">
        <view class="evaName">
          <image :src="item.avatar" mode=""></image>
          <text>{{ item.nickname }}</text>
          <view>已消费</view>
          <view class="view2">回头客</view>
        </view>
        <view class="evaText">
          {{ item.content }}
        </view>
      </view>
    </view>

    <view class="image-container">
      <image :src="constData.details_images[0]" mode="widthFix" class="original-image" :lazy-load="true" />
    </view>
    <view :style="{ 'padding-bottom': $getBottomHight() + 'px' }" style="height: 100rpx"></view>
    <view :style="{ 'padding-bottom': $getBottomHight() + 'px' }" class="bottomBtn">
      <view class="customer">
        <button data-biz-lin="1" data-im-type="goods" :data-goods-id="constData.product_id" :data-im-id="dataImId"
          open-type="im"></button>
        <image src="@/static/image/home/service.png" mode=""></image>
        <text>客服</text>
      </view>
      <view class="btnprice">
        {{
          promotionType === 'seckill' ? '￥' + msprice :
            promotionType === 'coupon' ? '￥' + promotionPrice :
              '￥' + (Number(constData.actual_amount) + totalPricea)
        }}
      </view>
      <text class="originMount">￥{{ constData.origin_amount }}</text>
      <view @click="bottomPop" class="btns"> 立即购买 </view>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { getGoodsDetails, position } from "@/api/home.js";
import { setTiktokIm } from "@/api/my.js";
// const plugin = tt.requirePlugin("tta5a3d31e3aecfb9b11");
export default {
  data() {
    return {
      load: false,
      constDataSkus: [],
      skusData: {},
      skusPrice: [],
      csamount: 1,
      skubuMore: 0,
      id: null, // 商品id
      content: "<div>富文本</div>",
      constData: {},
      dataImId: "77187188122",
      height: 0,
      x: "",
      y: "",
      type: "",
      totalPricea: 0,
      selectedCoupon: null, // 选中的优惠券
      calResult: {},
      // goodsMarkList: [],
      // orderMarket: {},
      promotionType: null,      // 优惠类型：null(无优惠), 'coupon'(满减券), 'seckill'(秒杀)
      promotionPrice: null,     // 优惠后价格（满减券时使用）
      countdown: null,          // 秒杀倒计时信息
      startTime: 0,             // 秒杀开始时间（时间戳）
      endTime: 0,               // 秒杀结束时间（时间戳）
      countdownTimer: null,      // 倒计时定时器引用
      msprice: null
    };
  },
  async onLoad(details) {
    if (!details.id) {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        // 不是第一个页面，正常返回
        uni.navigateBack();
      } else {
        // 是第一个页面，显示错误提示
        uni.showModal({
          title: "错误",
          content: "参数错误，无法加载商品",
          showCancel: false,
        });
      }
      return;
    }
    this.id = details.id;
    try {
      // 并行执行无依赖的请求
      await Promise.all([
        this.getLocation(),
        this.getTiktokIm(),
        this.goodsDetails(),
      ]);
    } catch (error) {
      uni.showToast({ title: "加载失败，请点击右上角三个点重启小程序", icon: "none" });
    }
  },
  computed: {
    ...mapGetters("user", ["isLogin"]),
  },
  methods: {
    ...mapActions("user", ["silentLogin"]),
    async getLocation() {
      try {
        // 尝试获取位置
        const { longitude, latitude } = await uni.getLocation({
          type: "wgs84",
        });
        this.x = longitude;
        this.y = latitude;
        this.type = 1;
        return true;
      } catch (error) {
        // 获取失败，请求权限
        this.type = 2;
        const { confirm } = await uni.showModal({
          title: "获取位置信息提示",
          content: "是否允许授权获取您的位置信息用于精确提供本地服务",
          cancelText: "取消",
          cancelColor: "#999",
          confirmText: "确定",
          confirmColor: "#f94218",
        });

        if (confirm) {
          // 用户同意，打开设置页面
          await uni.openSetting();
          try {
            // 再次尝试获取位置
            const { longitude, latitude } = await uni.getLocation({
              type: "wgs84",
            });
            this.x = longitude;
            this.y = latitude;
            this.type = 1;
            return true;
          } catch (err) {
            // 仍未授权，提示无法下单
            await uni.showModal({
              title: "提示",
              content:
                "抱歉!由于不能获取您的定位，无法确定您所在区域是否可接单，暂时不可下单!",
              showCancel: false,
            });
            return false;
          }
        } else {
          // 用户拒绝，提示无法下单
          await uni.showModal({
            title: "提示",
            content:
              "抱歉!由于不能获取您的定位，无法确定您所在区域是否可接单，暂时不可下单!",
            showCancel: false,
          });
          return false;
        }
      }
    },
    callphone(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber,
      });
    },
    setPayment() {
      uni.showLoading({ title: "加载中" });
      const { product_id, actual_amount, product_name, image_list_images, product_type } = this.constData;
      let order_amount = Number(actual_amount);
      const skuList = [];
      this.generateSku(skuList, product_id, product_name, image_list_images, this.constDataSkus);
      // 计算包含SKU附加项的总金额
      this.constDataSkus.forEach((item) => {
        if (item.buyMore > 0) {
          order_amount += item.price * item.buyMore;
        }
      });
      let paymentParams = {};

      if (product_type === 22) {
        // 原有的skuList参数结构
        paymentParams = {
          skuList: skuList,
          payment: {
            totalAmount: Math.round(order_amount * 100), // 总金额转换为分（整数）
          },
          tradeOption: {
            life_trade_flag: 1,
            trade_mode: "3",
          },
        };
      } else if (product_type === 1) {
        // 新的goodsList参数结构
        paymentParams = {
          goodsList: [
            {
              quantity: 1, // 购买数量，根据实际需求可能需要调整
              price: Math.round(order_amount * 100), // 商品价格，转换为分
              goodsName: product_name, // 商品名称
              goodsPhoto: image_list_images[0], // 商品图片
              goodsId: product_id, // 商品ID
              goodsType: 1, // 商品类型
              discountAmount:this.calResult.totalDiscountAmount
            },
          ],
          payment: {
            totalAmount: Math.round(order_amount * 100), // 总金额转换为分（整数）
          },
          tradeOption: {
            life_trade_flag: 1,
            trade_mode: "3",
          },
        };
      }
      // 处理折扣信息
      if (this.calResult.totalDiscountAmount > 0) {
        const discountInfo = this.buildDiscountInfo();
        paymentParams.discountInfo = discountInfo;
        paymentParams.payment.totalDiscountAmount = this.calResult.totalDiscountAmount;
      }
      tt.createOrder({
        ...paymentParams,
        success: (res) => {
          if (res) {
            const orderid = res.orderId;
            uni.navigateTo({
              url: `/pages/Paymentsuccess/Paymentsuccess?orderid=${orderid}&id=${this.id}`,
            });
          }
        },
        fail: (arr) => {
          if (arr.outOrderNo) {
            this.$showToast("支付取消");
          } else {
            this.$showToast("支付失败");
          }
        },
        complete: () => {
          uni.hideLoading();
        },
      });
    },
    async bottomPop() {
      try {
        // 检查位置信息
        const positionResult = await position({
          type: this.type,
          longitude: this.x,
          latitude: this.y,
        });
        if (positionResult.code !== 1) {
          await uni.showModal({
            title: "提示",
            content: positionResult.msg || "位置信息获取失败",
            showCancel: false,
          });
          return;
        }
        // 检查登录状态
        if (!this.isLogin) {
          // 未登录，跳转到登录页并尝试静默登录
          await uni.navigateTo({ url: "/pages/login/login" });
          await this.silentLogin(undefined, true);
        }
        // 执行支付流程
        await this.setPayment();
      } catch (error) {
        this.$showToast("操作失败，请重试");
      }
    },
    getTiktokIm() {
      setTiktokIm().then((res) => {
        if (res.code === 1) {
          this.dataImId = res.data;
        }
      });
    },
    toEvaluate(id) {
      uni.navigateTo({
        url: "/pages/evaluate/evaluate?id=" + id,
      });
    },
    async goodsDetails() {
      try {
        const res = await getGoodsDetails({ id: this.id });
        if (res.code !== 1) {
          throw new Error(res.msg || "获取商品详情失败");
        }
        this.constData = res.data;
        // 初始化SKU数据（优化数组处理）
        if (Array.isArray(res.data.skus)) {
          this.constDataSkus = res.data.skus.map((sku) => ({
            ...sku,
            buyMore: 0, // 初始化加购数量
          }));
          // 使用 reduce 构建价格映射表（更高效）
          this.skusPrice = this.constDataSkus.reduce((map, sku) => {
            map[sku.skuId] = sku.price;
            return map;
          }, {});
        }
        this.load = true;
        await this.promition(); // 确保促销计算完成
      } catch (error) {
        throw error; // 向上抛出错误，由 onLoad 统一处理
      }
    },
    promition() {
      // 计算包含SKU附加项的总金额（与订单金额一致）
      let totalAmount = Number(this.constData.actual_amount);
      this.constDataSkus.forEach((item) => {
        if (item.buyMore > 0) {
          totalAmount += item.price * item.buyMore;
        }
      });

      const { product_id } = this.constData;
      tt.computePromotion({
        goodsMarketingInfo: [
          {
            goodsId: product_id,
            quantity: 1,
            totalAmount: Math.round(totalAmount * 100), // 转换为分（整数）
            selectedMarketing: this.selectedCoupon
              ? { couponInfo: [this.selectedCoupon] }
              : {},
          },
        ],
        needDefaultMarketing: true,
        success: (res) => {
          this.handlePromotionResult(res);
          // 确保计算结果结构完整
          this.calResult = {
            totalDiscountAmount: 0,
            ...res.calculationResult
          };
        },
        fail: (err) => {
          uni.showToast({
            title: "获取优惠信息失败",
            icon: "none",
          });
        },
      });
    },
    handlePromotionResult(res) {
      // 初始化优惠信息
      this.promotionType = null;
      this.promotionPrice = null;
      this.startTime = 0;
      this.endTime = 0;

      // 检查是否有计算结果
      if (!res.calculationResult ||
        !res.calculationResult.goodsCalculationResultInfo ||
        res.calculationResult.goodsCalculationResultInfo.length === 0) {
        return;
      }

      // 获取第一个商品的营销详情
      const marketingDetail = res.calculationResult.goodsCalculationResultInfo[0].marketingDetailInfo;

      // 检查是否有营销详情
      if (!marketingDetail || marketingDetail.length === 0) {
        return;
      }

      // 获取第一个营销类型
      const firstMarketing = marketingDetail[0];

      // 处理秒杀活动 (type=4)
      if (firstMarketing.type === 4 &&
        res.goodsMarketingList &&
        res.goodsMarketingList.length > 0 &&
        res.goodsMarketingList[0].availableMarketing &&
        res.goodsMarketingList[0].availableMarketing.activityInfo &&
        res.goodsMarketingList[0].availableMarketing.activityInfo.length > 0) {

        const activityInfo = res.goodsMarketingList[0].availableMarketing.activityInfo[0];
        this.promotionType = 'seckill';
        this.startTime = activityInfo.startTime;
        this.endTime = activityInfo.endTime;
        this.startCountdown(); // 启动倒计时
        this.msprice = (this.constData.actual_amount - firstMarketing.discountAmount / 100).toFixed(2)
      }
      // 处理满减券 (type=2)
      else if (firstMarketing.type === 2) {
        this.promotionType = 'coupon';
        const originalPrice = this.constData.actual_amount;
        const discountAmount = firstMarketing.discountAmount / 100; // 分转换为元
        this.promotionPrice = (originalPrice - discountAmount).toFixed(2);
      }
    },
    // 启动秒杀活动倒计时，处理毫秒级时间戳
    startCountdown() {
      this.clearCountdown(); // 清除之前可能存在的定时器
      if (!this.endTime) return; // endTime 应为 1750143600000 这样的毫秒级时间戳

      const updateCountdown = () => {
        const now = Date.now(); // 当前时间，毫秒级
        let remaining = this.endTime - now; // 计算剩余毫秒数
        if (remaining > 0) {
          const seconds = Math.floor(remaining / 1000); // 转成秒，用于格式化
          this.countdown = {
            time: this.formatCountdown(seconds)
          };
        } else {
          this.countdown = {
            time: '00:00:00'
          };
          this.clearCountdown();
          // 重新获取促销信息，这里根据实际函数名调整，比如你的 promition 函数
          setTimeout(() => {
            this.promotionType = null;
            this.promition();
          }, 1000);
        }
      };

      updateCountdown(); // 初始化显示
      this.countdownTimer = setInterval(updateCountdown, 1000); // 每秒更新
    },
    // 格式化倒计时，将秒数转成 HH:mm:ss
    formatCountdown(seconds) {
      if (seconds <= 0) return '00:00:00';
      const hours = Math.floor(seconds / 3600);
      const minutes = Math.floor((seconds % 3600) / 60);
      const secs = Math.floor(seconds % 60);
      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    },
    // 清除倒计时定时器
    clearCountdown() {
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer);
        this.countdownTimer = null;
      }
    },
    buildDiscountInfo() {
      // 防御性检查
      if (!this.calResult || !this.calResult.itemCalculationResultInfo) {
        return { type: 2, detail: { totalDiscountAmount: 0 } };
      }
      const { itemCalculationResultInfo, totalDiscountAmount } = this.calResult;
      const firstItem = itemCalculationResultInfo[0];

      // 提取基础信息
      const goodsId = firstItem.goodsId;
      const totalAmount = firstItem.totalAmount; // 商品总价（分）
      const quantity = this.constDataSkus.reduce((sum, item) => sum + item.buyMore, 1); // 计算总数量
      // 提取指定的7个参数，忽略其他字段
      const extractMarketingInfo = (item) => ({
        discountAmount: item.discountAmount,
        discountRange: item.discountRange,
        id: item.id,
        note: item.note,
        kind: item.kind,
        creatorType: item.creatorType,
        title: item.title,
        type: item.type,
        marketingExtend: item.marketingExtend,
        code: item.code
      });

      // 提取所有营销信息并转换为只包含指定参数的对象
      const allMarketingInfo = (firstItem.marketingDetailInfo || []).map(extractMarketingInfo);
      // 计算商品维度总折扣
      const goodsTotalDiscount = allMarketingInfo.reduce(
        (sum, item) => sum + item.discountAmount,
        0
      );
      return {
        type: 2,
        detail: {
          // 订单维度折扣（示例中为0，实际需根据订单级优惠调整）
          orderDiscount: {
            orderTotalDiscountAmount: 0,
            goodsTotalDiscountAmount: goodsTotalDiscount,
            marketingInfo: allMarketingInfo // 订单级营销信息（如有）
          },

          // 商品维度折扣
          goodsDiscount: [
            {
              goodsId: goodsId,
              skuId: goodsId,
              quantity: quantity,
              totalAmount: totalAmount,
              totalDiscountAmount: goodsTotalDiscount,
              marketingInfo: allMarketingInfo
            }
          ],

          // 单品维度折扣
          itemDiscount: [
            {
              goodsId: goodsId,
              skuId: goodsId,
              totalAmount: totalAmount,
              totalDiscountAmount: goodsTotalDiscount,
              marketingInfo: allMarketingInfo
            }
          ],
        }
      };
    },

    generateSku(skuList, product_id, product_name, image_list_images, constDataSkus) {
      // 主SKU信息
      const mainSku = {
        skuId: product_id,
        quantity: 1,
        price: Math.round(this.constData.actual_amount * 100), // 转换为分（整数）
        skuType: 1,
        goodsInfo: {
          goodsName: product_name,
          goodsPhoto: image_list_images[0],
          goodsId: product_id,
          goodsType: 1,
        },
      };

      // 如果有折扣信息，添加discountAmount字段
      if (this.calResult && this.calResult.totalDiscountAmount > 0) {
        mainSku.discountAmount = this.calResult.totalDiscountAmount;
      }

      skuList.push(mainSku);

      // 添加附加SKU
      constDataSkus.forEach((element) => {
        if (element.buyMore > 0) {
          skuList.push({
            skuId: element.skuId,
            quantity: element.buyMore,
            price: Math.round(element.price * 100), // 转换为分（整数）
            skuType: 2,
            goodsInfo: {
              goodsName: product_name,
              goodsPhoto: image_list_images[0],
              goodsId: product_id,
              goodsType: 1,
            },
          });
        }
      });

      if (skuList.length > 1) {
        skuList[0].skuType = 2;
      }
    },
    advance(judge, index) {
      const updatedSkus = { ...this.constDataSkus[index] };
      if (judge) {
        updatedSkus.buyMore < 50 && updatedSkus.buyMore++;
      } else {
        updatedSkus.buyMore > 0 && updatedSkus.buyMore--;
      }
      this.skubuMore = updatedSkus.buyMore;
      this.$set(this.constDataSkus, index, updatedSkus);

      let totalPrice = 0;
      this.constDataSkus.forEach((item) => {
        const itemTotal = item.price * item.buyMore;
        totalPrice += itemTotal;
      });
      this.totalPricea = totalPrice;
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  padding: 40rpx 25rpx;
  background-color: #fff;

  .uv-popup::v-deep {
    .uv-popup__content::v-deep {
      width: 92;
      margin: auto;
    }
  }

  .imgage {
    position: absolute;
    width: 100%;
    height: 200rpx;
    top: 0;
    right: 0;
  }
}

.bottomBtn {
  width: 100%;
  height: 100rpx;
  position: fixed;
  bottom: 0;
  border-top: #e5e5e5 solid 2rpx;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  z-index: 9999;

  .customer {
    height: 56rpx;
    width: 116rpx;
    border-radius: 38rpx;
    border: #7e7e7e 1rpx solid;
    margin-left: 22rpx;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: relative;

    button::after {
      border: none;
      background-color: none;
    }

    button {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 175rpx;
      height: 73rpx;
      background-color: inherit;
      z-index: 99999;
    }

    image {
      width: 36rpx;
      height: 38rpx;
      margin-right: 4rpx;
    }

    text {
      color: #7e7e7e;
      font-weight: bold;
      font-size: 20rpx;
    }
  }

  .btnprice {
    font-size: 44rpx;
    color: #ff8104;
    font-weight: bold;
  }

  .originMount {
    color: #ccc;
    text-decoration: line-through;
    font-size: 26rpx;
  }

  .btns {
    background: #ff8104;
    color: #fff;
    border-radius: 38rpx;
    width: 320rpx;
    height: 75rpx;
    margin-right: 22rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
  }
}

.evale {
  margin-bottom: 50rpx;

  .evaluate:nth-of-type(1) {
    padding-bottom: 26rpx;
    border-bottom: #f3f3f3 solid 2rpx;
  }
}

.image-container {
  display: flex;
  justify-content: center;

  .original-image {
    display: block;
    width: 100%;
    max-width: 100%;
  }
}

.evaluate {
  margin-top: 26rpx;

  .evaText {
    padding-left: 76rpx;
    font-weight: 400;
    color: #1c2023;
    font-size: 28rpx;
    padding-right: 10rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .evaName {
    display: flex;
    align-items: center;

    image {
      width: 60rpx;
      height: 60rpx;
      border-radius: 100%;
    }

    text {
      color: #1c2023;
      font-weight: 500;
      font-size: 26rpx;
      padding: 0 16rpx;
    }

    view {
      background-color: #d5e8fc;
      border-radius: 20rpx;
      font-size: 24rpx;
      color: #4671c6;
      padding: 2rpx 10rpx;
    }

    .view2 {
      color: #ff8104 !important;
      background-color: #ffd4a8 !important;
      margin-left: 16rpx;
    }
  }
}

.reputation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  margin-top: 35rpx;

  .rep-r {
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 16rpx;
      height: 16rpx;
      margin-left: 5rpx;
    }

    text {
      color: #606972;
      font-size: 24rpx;
    }
  }

  .rep-l {
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 30rpx;
      height: 27rpx;
      margin-right: 12rpx;
    }

    text {
      color: #1c2023;
      font-size: 28rpx;
    }
  }
}

.subheading {
  color: #606972;
  font-weight: 400;
  font-size: 26rpx;
  margin-top: 35rpx;
  padding-bottom: 35rpx;
  border-bottom: #f3f3f3 solid 2rpx;

  .flexC {
    display: flex;
    align-items: center;
  }

  .Addpurchase {
    margin-top: 60rpx;

    .jg {
      font-size: 30rpx;

      .blackfont {
        color: #1c2023;
        margin-left: 16rpx;
      }
    }

    .progress {
      justify-content: space-around;
      margin-top: 20rpx;
      margin-bottom: 20rpx;

      .flex-c {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .proG {
        font-size: 28rpx;
        margin-right: -80rpx;

        view:nth-child(1) {
          border: #979a9d 1rpx solid;
          border-radius: 60rpx 0 0 60rpx;
        }

        view:nth-child(2) {
          border-top: #979a9d 1rpx solid;
          border-bottom: #979a9d 1rpx solid;
          font-weight: bold;
          width: 70rpx !important;
        }

        view:nth-child(3) {
          border: #979a9d 1rpx solid;
          border-radius: 0 60rpx 60rpx 0;
        }

        view {
          flex: 1;
          width: 60rpx;
          height: 60rpx;
        }
      }

      .text {
        color: #1c2023;
        font-size: 28rpx;
        margin-right: 60rpx;
      }
    }

    .red {
      color: red;
    }
  }

  .shb_text {
    display: flex;
    align-items: center;

    text:nth-child(1) {
      width: 12%;
    }

    text:nth-child(2) {
      width: 88%;
    }
  }

  .shb_texta {
    display: flex;
    align-items: center;

    text:nth-child(1) {
      width: 20%;
    }

    text:nth-child(2) {
      width: 80%;
    }

    margin-top: 20rpx;
  }

  .shb_text:nth-child(2) {
    margin: 20rpx 0;
  }
}

.title {
  font-size: 38rpx;
  font-weight: bold;
  color: #1c2023;
  margin-top: 40rpx;
}

.price {
  display: flex;
  align-items: center;
  margin-top: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;

  .hands {
    height: 40rpx;
    background: #d5e8fc;
    width: 100rpx;
    border-radius: 40rpx;
    font-size: 24rpx;
    color: #4671c6;
    text-align: center;
    line-height: 40rpx;
  }

  .currentPrice {
    color: #ff8104;
    font-size: 38rpx;
    margin: 0 20rpx;
  }

  .mjcouPrice {
    padding: 8rpx 20rpx;
    border-radius: 60rpx;
    background-color: red;
    color: #ffffff;
    font-size: 26rpx;
    margin-right: 20rpx;

    text {
      font-weight: bolder;
      font-size: 30rpx;
    }
  }

  .original {
    font-size: 24rpx;
    color: #606972;
    text-decoration: line-through;
  }
}

.msprice {
  font-family: PingFang SC;
  font-weight: 500;
  margin-top: 30rpx;

  .seckill-wrap {
    background: linear-gradient(to right, #fcaa58, #ff8104);
    /* 红色渐变背景，可按需微调 */
    color: #fff;
    padding: 20rpx 20rpx;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;

    .seckill-wrapleft {
      display: flex;
      flex-direction: column;

      /* 内容不换行 */
      .seckill-label {
        font-size: 24rpx;
      }

      .msprice_a {
        .seckill-price {
          font-size: 38rpx;
          color: #fff;
          font-weight: bold;
          margin: 0 10rpx;
        }

        .original-price {
          font-size: 24rpx;
          text-decoration: line-through;
          color: #fff;
          opacity: 0.8;
          /* 让原价稍淡，突出秒杀价 */
          margin: 0 20rpx;
        }
      }

    }

    .seckill-result {
      font-size: 24rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .countdown {
        font-size: 24rpx;
        display: flex;
        align-items: center;
        margin-top: 20rpx;

        .countdown-item {
          font-weight: bold;
          margin: 0 5rpx;
        }
      }
    }
  }
}

.swiper {
  height: 350rpx;
  border-radius: 10rpx;

  image {
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
  }
}
</style>
